<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .header {
            width: 100%;
            height: 100vh;
            background-image: url(img/bg.jpeg);
            background-position: center;
            background-size: cover;
        }

        nav {
            width: 100%;
            /* padding: 20px 0 ; */
            text-align: center;

        }

        nav ul {
            width: 100%;
            color: darkgoldenrod;
            /* margin-top: 12px; */
        }

        nav ul li {
            display: inline-block;
            margin-left: 20px;
        }

        nav.sticky {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 50px;
            background: #000;
            transition: 1s;
        }

        nav.sticky ul {
            width: auto;
            background: red;
        }

        .logo {
            width: 120px;
        }
    </style>

    <div class="header">
        <nav id="navbar">
            <img src="img/bg6.jpg" alt="" class=" logo ">
            <ul id="menu">
                <li>Home</li>
                <li>Home</li>
                <li>向下滑动</li>
                <li>向下滑动</li>
                <li>Home</li>
            </ul>
        </nav>
    </div>

    <h2>...</h2>
    <h2>兼容 ie ...</h2>
    <h2>兼容 ie ...</h2>
    <h2>向下滑动...</h2>

    <pre>
        <h3>
            var navbar = document.getElementById("navbar");
        var menu = document.getElementById("menu");
        window.onscroll = function () {
            if(window.pageYOffset >= menu.offsetTop){
                navbar.classList.add("sticky");
            }else{
                navbar.classList.remove("sticky");
            }
        }

        nav.sticky {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 50px;
            background: #000;
            transition: 1s;
        }
        </h3>
    </pre>

    <h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quaerat repudiandae enim asperiores temporibus
        porro aperiam aliquam, tenetur harum ullam pariatur vero autem.
    </h1>
    <h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quaerat repudiandae enim asperiores temporibus
        porro aperiam aliquam, tenetur harum ullam pariatur vero autem.
    </h1>
    <h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quaerat repudiandae enim asperiores temporibus
        porro aperiam aliquam, tenetur harum ullam pariatur vero autem.
    </h1>
    <h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quaerat repudiandae enim asperiores temporibus
        porro aperiam aliquam, tenetur harum ullam pariatur vero autem.
    </h1>
    <h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quaerat repudiandae enim asperiores temporibus
        porro aperiam aliquam, tenetur harum ullam pariatur vero autem.
    </h1>


    <script>
        var navbar = document.getElementById("navbar");
        var menu = document.getElementById("menu");
        window.onscroll = function () {
            if (window.pageYOffset >= menu.offsetTop) {
                navbar.classList.add("sticky");
            } else {
                navbar.classList.remove("sticky");
            }
        }
    </script>
</body>

</html>